<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <image src="/static/ic_back.png" mode=""></image>
      </view>
      <text class="nav-title">系统设置</text>
      <view class="nav-right"></view>
    </view>

    <!-- 通知设置 -->
    <view class="setting-group">
      <view class="group-title">通知设置</view>
      <view class="setting-item">
        <text class="item-name">消息通知</text>
        <switch class="item-switch" checked @change="toggleNotification"></switch>
      </view>
      <view class="setting-item">
        <text class="item-name">声音提醒</text>
        <switch class="item-switch" checked @change="toggleSound"></switch>
      </view>
      <view class="setting-item">
        <text class="item-name">震动提醒</text>
        <switch class="item-switch" checked @change="toggleVibrate"></switch>
      </view>
      <view class="setting-item">
        <text class="item-name">通知横幅</text>
        <switch class="item-switch" checked @change="toggleBanner"></switch>
      </view>
    </view>

    <!-- 账号安全 -->
    <view class="setting-group">
      <view class="group-title">账号安全</view>
      <view class="setting-item" @click="changePassword">
        <text class="item-name">修改密码</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="bindPhone">
        <text class="item-name">绑定手机</text>
        <text class="item-value">138****1234</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="bindEmail">
        <text class="item-name">绑定邮箱</text>
        <text class="item-value">exam***@example.com</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="securityCenter">
        <text class="item-name">安全中心</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
    </view>

    <!-- 通用设置 -->
    <view class="setting-group">
      <view class="group-title">通用设置</view>
      <view class="setting-item" @click="languageSetting">
        <text class="item-name">语言</text>
        <text class="item-value">简体中文</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="fontSetting">
        <text class="item-name">字体大小</text>
        <text class="item-value">标准</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="clearCache">
        <text class="item-name">清除缓存</text>
        <text class="item-value">28.6MB</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="privacySetting">
        <text class="item-name">隐私设置</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
    </view>

    <!-- 关于应用 -->
    <view class="setting-group">
      <view class="group-title">关于应用</view>
      <view class="setting-item" @click="aboutApp">
        <text class="item-name">版本信息</text>
        <text class="item-value">v1.0.0</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="checkUpdate">
        <text class="item-name">检查更新</text>
        <text class="item-value">已是最新版本</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="userAgreement">
        <text class="item-name">用户协议</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view class="setting-item" @click="privacyPolicy">
        <text class="item-name">隐私政策</text>
        <image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: {
        notification: true,
        sound: true,
        vibrate: true,
        banner: true,
        language: '简体中文',
        fontSize: '标准',
        cacheSize: '28.6MB',
        version: 'v1.0.0'
      },
      userInfo: {
        phone: '138****1234',
        email: 'exam***@example.com'
      }
    }
  },
  onLoad() {
    // 加载用户设置
    this.loadSettings();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadSettings() {
      // 模拟从本地存储或服务器获取设置
      // 实际项目中应该调用API获取数据
      setTimeout(() => {
        // 这里可以添加设置加载完成后的逻辑
      }, 300);
    },
    toggleNotification(e) {
      this.settings.notification = e.detail.value;
      // 保存通知设置
      this.saveSetting('notification', this.settings.notification);
    },
    toggleSound(e) {
      this.settings.sound = e.detail.value;
      // 保存声音设置
      this.saveSetting('sound', this.settings.sound);
    },
    toggleVibrate(e) {
      this.settings.vibrate = e.detail.value;
      // 保存震动设置
      this.saveSetting('vibrate', this.settings.vibrate);
    },
    toggleBanner(e) {
      this.settings.banner = e.detail.value;
      // 保存横幅设置
      this.saveSetting('banner', this.settings.banner);
    },
    saveSetting(key, value) {
      // 模拟保存设置到本地存储或服务器
      console.log(`保存设置: ${key}=${value}`);
      // 实际项目中应该调用API保存数据
    },
    changePassword() {
      uni.navigateTo({
        url: '/pages/settings/password'
      });
    },
    bindPhone() {
      uni.navigateTo({
        url: '/pages/settings/bindphone'
      });
    },
    bindEmail() {
      uni.navigateTo({
        url: '/pages/settings/bindemail'
      });
    },
    securityCenter() {
      uni.navigateTo({
        url: '/pages/settings/security'
      });
    },
    languageSetting() {
      uni.navigateTo({
        url: '/pages/settings/language'
      });
    },
    fontSetting() {
      uni.navigateTo({
        url: '/pages/settings/font'
      });
    },
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除应用缓存吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟清除缓存
            setTimeout(() => {
              this.settings.cacheSize = '0KB';
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
            }, 500);
          }
        }
      });
    },
    privacySetting() {
      uni.navigateTo({
        url: '/pages/settings/privacy'
      });
    },
    aboutApp() {
      uni.navigateTo({
        url: '/pages/settings/about'
      });
    },
    checkUpdate() {
      uni.showToast({
        title: '已是最新版本',
        icon: 'none'
      });
    },
    userAgreement() {
      uni.navigateTo({
        url: '/pages/settings/agreement'
      });
    },
    privacyPolicy() {
      uni.navigateTo({
        url: '/pages/settings/privacy-policy'
      });
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.nav-bar {
  height: 100rpx;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.nav-back {
  width: 60rpx;
  display: flex;
  justify-content: flex-start;
}

.nav-back image {
  width: 24rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.nav-right {
  width: 60rpx;
}

.setting-group {
  background-color: white;
  margin-top: 20rpx;
}

.group-title {
  font-size: 26rpx;
  color: #999;
  padding: 20rpx 30rpx;
  background-color: #f5f7fa;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.item-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.item-value {
  font-size: 26rpx;
  color: #999;
  margin-right: 20rpx;
}

.item-arrow {
  width: 24rpx;
  height: 24rpx;
}

.item-switch {
  transform: scale(0.8);
}
</style>    